<template>
  <div class="tab-container">
    <ul class="tab-switch-warp">
      <li class="tab-switch-bar" v-for="tab in tabs" @click="tabClickHandler(tab)"
          :class="{'tab-switch-bar--active': tab === currentActive}"
      >
        <span class="tab-switch-bar-title" v-text="tab"></span>
      </li>
    </ul>
    <div class="tab-switch-tabs">
      <slot></slot>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tabs: [],
        currentActive: null
      }
    },

    methods: {
      /**
       * @desc tab click handler.
       * @param labelName {String} tab label name.
       */
      tabClickHandler (labelName) {
        this.currentActive = labelName;
        this.$broadcast('tabChange', labelName)
      }
    },

    events: {
      /**
       * @desc tabs created event process.
       * @param labelName {String} tabs label name.
       */
      tabsInit (labelName) {
        this.tabs.push(labelName);
      }
    },

    ready () {
      this.currentActive = this.tabs[0];
      this.$broadcast('tabChange', this.tabs[0]);
    }
  }
</script>

<style>
  .tab-switch-warp {
    border-bottom: 1px solid #F1F1F1;
  }
  .tab-switch-bar {
    display: inline-block;
    font-size: 14px; color: #4A4A4A;
    cursor: pointer;
  }
  .tab-switch-bar--active:after {
      content: '';
      display: block;
      width: 100%; height: 1px;
      background: #4A4A4A;
  }
  .tab-switch-bar-title {
    display: inline-block;
    padding: 10px 6px;
  }
</style>
